<template>
    <div class="saveBoard">
        <el-dialog :visible.sync="saveBoardVisible" width="400px" @close='handleClose' :close-on-click-modal='false'>
            <div class="dialogBody">
                <el-form :model="saveForm" :rules="saveRules" ref="saveForm" label-width="120px" size="mini">
                    <el-form-item label="工艺路线编号" prop="code">
                        <el-input v-model="saveForm.code" placeholder="请输入,忽略将自动生成"></el-input>
                    </el-form-item>
                    <el-form-item label="工艺路线名称" prop="name">
                        <el-input v-model="saveForm.name" placeholder="请填写"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click='saveBoardVisible = false'>取 消</el-button>
                <el-button type="primary" size="mini" @click='confirmAdd'>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                saveForm: {
                    code: '',
                    name: ''
                },
                saveRules: {
                    name: [{
                        required: true,
                        message: '工艺路线名称不能为空!',
                        trigger: 'change'
                    }]
                },
                saveBoardVisible: false,
            }
        },
        methods: {
            add(payload) {
                this.saveBoardVisible = true
            },
            handleClose() {
                this.$refs.saveForm.resetFields()
            },
            //确认
            confirmAdd() {
                this.$refs.saveForm.validate((valid) => {
                    if (valid) {
                       this.$emit('emitSaveBoard',this.saveForm)
                       this.saveBoardVisible = false
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .saveBoard {
        .dialogBody {
            padding: 30px 20px 15px 0;
            border: 1px solid #edeef3;
            background: #fbfbfb;
        }

        /deep/ .el-dialog__body {
            padding: 20px 40px;
        }

        /deep/ .el-dialog__footer {
            text-align: center;

            .el-button {
                padding: 7px 35px;
            }
        }
    }
</style>